<template>
  <el-row :gutter="40" class="panel-group">
    <el-col class="card-panel-col" v-for="(item, i) in topData" :key="i">
      <div class="card-panel">
        <div class="card-panel-left">
          <div
            class="topHome_bgi"
            :class="
              item.icon == 1
                ? 'bgi1'
                : item.icon == 2
                ? 'bgi2'
                : item.icon == 3
                ? 'bgi3'
                : item.icon == 4
                ? 'bgi4'
                : item.icon == 5
                ? 'bgi5'
                : ''
            "
          ></div>
        </div>
        <div class="card-panel-right">
          <div class="text">
            {{ item.name }}
          </div>
          <count-to
            :start-val="0"
            :end-val="item.num"
            :duration="3000"
            class="num"
          />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  components: {
    CountTo,
  },
  data() {
    return {
      topData: [
        {
          name: "已检测车辆(辆)",
          num: 210,
          icon: "1",
        },
        {
          name: "机械总数(辆)",
          num: 12210,
          icon: "2",
        },
        {
          name: "在线(辆)",
          num: 8900,
          icon: "3",
        },
        {
          name: "工作中(辆)",
          num: 8907,
          icon: "4",
        },
        {
          name: "未工作",
          num: 2930,
          icon: "5",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  .card-panel-col {
    width: 20%;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: flex;
    padding: 16px;
    .card-panel-left {
      display: flex;
      align-items: center;
      .topHome_bgi {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        float: left;
      }
      .bgi1 {
        background-image: url("../../assets/images/index/index_1.png");
      }
      .bgi2 {
        background-image: url("../../assets/images/index/index_2.png");
      }
      .bgi3 {
        background-image: url("../../assets/images/index/index_3.png");
      }
      .bgi4 {
        background-image: url("../../assets/images/index/index_4.png");
      }
      .bgi5 {
        background-image: url("../../assets/images/index/index_5.png");
      }
    }
    .card-panel-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      flex: 1;
      margin-left: 20px;
      .text {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 12px;
      }
      .num {
        font-size: 20px;
      }
    }
  }
}
</style>
